<template>
  <div class="break_main">
    <head-top head-title="请假调休" go-back="true"></head-top>
    <div class="back" @click="back"></div>
    <div class="type_chose">
      <div class="box_title border-bottom">
        <span>请选择类别：</span>
      </div>
      <ul class="items clearfix">
        <li v-for="item in assort" class="item" @click="selectStyle(item)">
          <span class="title" :class="{'active':item.active,'unactive':!item.active}">
          {{item.name}}
          </span>
        </li>
      </ul>
    </div>
    <div class="line_box"></div>
    <div class="time_chose">
      <li @click="openPicker">
        <mt-cell title="开始时间：" is-link>
          <span style="color: #0078de">{{startTime}}</span>
        </mt-cell>
      </li>
      <li @click="endPicker">
        <mt-cell title="结束时间：" is-link>
          <span style="color: #0078de">{{endTime}}</span>
        </mt-cell>
      </li>
      <li class="li_li">
        <span>请假天数：</span>
        <input type="text" placeholder="请输入请假天数" v-model.trim="days" maxlength="4">
      </li>
    </div>
    <div class="line_box"></div>
    <div class="holiday_des">
      <div class="box_title border-bottom">
        <span>请假说明：</span>
      </div>
      <text-publish @getValue="getValue" :holder="holder"></text-publish>
    </div>
    <div class="line_box"></div>
    <div class="img_prove">
      <div class="box_title border-bottom">
        <span>图片说明：</span>
      </div>
      <ident-publish @getImage="getImage"></ident-publish>
    </div>
    <div class="line_box"></div>
    <div class="chose_manger">
      <div class="box_title border-bottom">
        <span>选择管理员：</span>
      </div>
      <div class="manger_list border-bottom">
        <li v-for="(item,index) in mangers">
          <img :src="item.avatar" alt="">
          <p class="name_text">{{item.AdminName}}</p>
          <!--单选-->
          <label class="checkbox-label">
            <input :name="item.name" :value="index" :checked="index == 0" type="radio"
                   class="checkbox-input event-allChooseHouse" @click="selectOne(item.role_id)"/>
            <span class="checkbox-core"></span>
          </label>
        </li>
      </div>
    </div>
    <div class="btn_box">
      <button @click="btnSubmit">
        <span>确认提交</span>
      </button>
    </div>
    <!--开始时间的弹窗-->
    <mt-datetime-picker
      ref="picker"
      type="datetime"
      v-model="pickerValue"
      @confirm="handleConfirm">
    </mt-datetime-picker>
    <!--结束时间的弹窗-->
    <mt-datetime-picker
      ref="picker2"
      type="datetime"
      v-model="pickerValue"
      @confirm="handleConfirm2">
    </mt-datetime-picker>
  </div>
</template>
<style lang="scss">
  .break_main {
    width: 100%;
    padding-top: 40px;
    background: #fff;
    position: relative;
    .back {
      width: 42px;
      height: 42px;
      line-height: 42px;
      opacity: 0;
      z-index: 667;
      position: absolute;
      top: 0;
      left: 0;
    }
    .type_chose {
      width: 100%;
      .box_title {
        width: 100%;
        padding: 13px 0;
        span {
          font-size: 15px;
          color: #666666;
          margin-left: 10px;
        }
      }
      .items {
        padding-bottom: 20px;
        .item {
          float: left;
          width: 25%;
          height: 40px;
          line-height: 45px;
          text-align: center;
          margin-top: 5px;
          .title {
            border: 1px solid #d9d9d9;
            padding: 10px 11px;
            border-radius: 3px;
            color: #292929;
          }
          .active {
            border: 1px solid #0078de;
            padding: 8px 10px;
            border-radius: 3px;
            color: #0b7ad9;
          }
        }
      }
    }
    .line_box {
      width: 100%;
      height: 5px;
      background: #f2f2f2;
    }
    .time_chose {
      width: 100%;
      .li_li {
        font-size: 1.3em;
        height: 48px;
        line-height: 48px;
        width: 100%;
        display: inline-flex;
        justify-content: space-between;
        span {
          padding: 0 10px;
        }
        input {
          width: 37%;
          border: none;
          outline: none;
          font-size: 1.3rem;
          color: #888;
        }
      }
    }
    .holiday_des {
      width: 100%;
      .box_title {
        width: 100%;
        padding: 13px 0;
        span {
          font-size: 15px;
          color: #666666;
          margin-left: 10px;
        }
      }
    }
    .img_prove {
      width: 100%;
      .box_title {
        width: 100%;
        padding: 13px 0;
        span {
          font-size: 15px;
          color: #666666;
          margin-left: 10px;
        }
      }
    }
    .chose_manger {
      width: 100%;
      .box_title {
        width: 100%;
        padding: 13px 0;
        span {
          font-size: 15px;
          color: #666666;
          margin-left: 10px;
        }
      }
      .manger_list {
        width: 100%;
        display: inline-flex;
        align-items: center;
        padding: 10px 0;
        li {
          padding-left: 10px;
          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-bottom: 5px;
          }
          .name_text {
            text-align: center;
            padding-bottom: 10px;
          }
          .checkbox-label {
            padding: 0 0.1rem;
            display: flex;
            align-items: center;
            padding-left: 13px;
          }
          .checkbox-label .checkbox-input {
            display: none;
            opacity: 0;
          }

          .checkbox-label .checkbox-core {
            display: inline-block;
            border-radius: 100%;
            border: 1px solid #c2c2c2;
            position: relative;
            width: 20px;
            height: 20px;
            vertical-align: middle;
          }

          .checkbox-core:after {
            border: 2px solid transparent;
            border-left: 0;
            border-top: 0;
            content: " ";
            top: 1px;
            left: 7px;
            position: absolute;
            width: 6px;
            height: 12px;
            -webkit-transform: rotate(45deg) scale(0);
            transform: rotate(45deg) scale(0);
            -webkit-transition: -webkit-transform .2s;
            transition: -webkit-transform .2s;
            transition: transform .2s;
            transition: transform .2s, -webkit-transform .2s;
          }

          .checkbox-input:checked + .checkbox-core {
            background-color: #26a2ff;
            border-color: #26a2ff;
          }

          .checkbox-input:checked + .checkbox-core:after {
            border-color: #fff;
            -webkit-transform: rotate(45deg) scale(1);
            transform: rotate(45deg) scale(1);
          }
        }
      }
    }
    .btn_box {
      width: 100%;
      text-align: center;
      padding-bottom: 20px;
      button {
        width: 90%;
        height: 44px;
        background: #0078de;
        outline: none;
        border: none;
        border-radius: 5px;
        margin-top: 20px;
        span {
          font-size: 15px;
          color: #fff;
        }
      }
    }
  }
</style>
<script>
  import headTop from '../../components/header/Header.vue'
  import TextPublish from '../../components/common/textPublish'
  import IdentPublish from '../../components/common/IdentPublish.vue'
  import { getmanger, getBreaked } from '../../api/supervise'
  import { Toast, Indicator } from 'mint-ui'

  export default {
    data () {
      return {
        mangers: [],
        selectArr: [], // 管理员选择的数组
        assort: [
          {id: 1, name: '事假', type: 'level'},
          {id: 2, name: '病假', type: 'sick_leave'},
          {id: 3, name: '年假', type: 'annual_leave'},
          {id: 4, name: '调休', type: 'break_down'},
          {id: 5, name: '婚假', type: 'wedding_leave'},
          {id: 6, name: '产假', type: 'maternity_leave'},
          {id: 7, name: '陪产假', type: 'paternity_leave'},
          {id: 8, name: '其他', type: 'other'}
        ],
        value: '', // 存放所选择假期类型的值
        pickerValue: '', // 时间选择v-model值
        startTime: '请选择开始时间',
        sTime: '',
        endTime: '请选择结束时间',
        eTime: '',
        days: '', // 请假天数
        holidayDes: '', // 请假说明
        holder: '请仔细的对你的请假进行描述',
        serverIds: [], // 图片
        mangerId: '' // 管理员
      }
    },
    created () {
      this._getmanger()
    },
    methods: {
      back () {
        // this.$router.push('/TeamList')
        this.$router.back()
      },
      // 获取管理员信息
      _getmanger () {
        getmanger().then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.mangers = res.data
            // console.log(this.mangers)
          }
        })
      },
      // 类别选择
      selectStyle (item) {
        this.value = item.type
        // console.log(this.value)
        setTimeout(() => {
          this.assort.forEach(item => {
            this.$set(item, 'active', false)
          })
          this.$set(item, 'active', true)
        }, 20)
      },
      // 开始时间
      openPicker () {
        this.$refs.picker.open()
      },
      // 开始时间转化
      handleConfirm (e) {
        this.sTime = new Date(e).toLocaleDateString().replace(/\//g, '-') + ' ' + new Date(e).toTimeString().substr(0, 9)
        this.startTime = this.sTime
        // console.log(this.startTime)
      },
      // 结束时间
      endPicker () {
        this.$refs.picker2.open()
      },
      // 结束时间转化
      handleConfirm2 (e) {
        this.eTime = new Date(e).toLocaleDateString().replace(/\//g, '-') + ' ' + new Date(e).toTimeString().substr(0, 9)
        this.endTime = this.eTime
        // console.log(this.endTime)
      },
      // 请假说明
      getValue (value) {
        this.holidayDes = value
      },
      // 图片证明
      getImage (image) {
        this.serverIds = image
      },
      // 管理员选择
      selectOne (id) {
        this.mangerId = id
        // console.log(this.mangerId)
      },
      // 确认提交
      btnSubmit () {
        setTimeout(function () {
          Indicator.close()
        }, 5000)
        if (!this.value) {
          Toast({
            message: '请选择请假类型',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (this.startTime !== this.sTime) {
          Toast({
            message: '请选择开始时间',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (this.endTime !== this.eTime) {
          Toast({
            message: '请选择结束的时间',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.days) {
          Toast({
            message: '请输入请假天数',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.holidayDes) {
          Toast({
            message: '请输入请假说明',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.mangerId) {
          Toast({
            message: '请选择管理员',
            position: 'middle',
            duration: 2000
          })
          return
        }
        Indicator.open({
          text: '提交中...',
          spinnerType: 'fading-circle'
        })
        getBreaked(this.value, this.holidayDes, this.mangerId, this.startTime, this.endTime, this.days, this.serverIds).then(res => {
          console.log(res)
          if (res.code === 200) {
            Indicator.close()
            Toast({
              message: res.data.msg,
              position: 'middle',
              duration: 1500
            })
            // this.$router.push('/MyRecord')
            this.$router.back()
          }
          if (res.code === 400) {
            Toast({
              message: res.error.msg,
              position: 'middle',
              duration: 1500
            })
          }
        })
      }
    },
    components: {
      headTop,
      TextPublish,
      IdentPublish
    }
  }
</script>
